<template>
	<view class="container">
		<!-- #ifdef APP-PLUS||H5 -->
		<titlebar mode="个人资料设置" :back="true" :text="text" backgroundColor='#f5f5f5'>
			<view slot="title">
				<view class="titleText">{{text}}</view>
				<view class="save" @click="save">保存</view>

			</view>
		</titlebar>
		<!-- #endif -->

		<view class="setting-list">

			<view class="row" @click="getWidth">
				<view class="left">
					<text lines="1" class="text">头像</text>
				</view>
				<view class="left">
					<image class="headIcon"
						:src="userInfo&&userInfo.userimages||'@appstatic/my/my_icon_avatar_unlogin.png'">
						<image class="arrow" src="@appstatic/img/my/my_icon_right_arrow.png">
				</view>
			</view>

			<view class="row" v-if="wechatNameModifiable==true">

				<view lines="1" class="left text" style="width: 130px;">用户昵称</view>

				<view class="left">
					<textarea class="uni-text" style="max-width: 210px;" type="text" value='nickname' v-model='nickname'
						data-type='nickname' maxlength="30" @input='inputValueChange' placeholder="请输入用户昵称"
						placeholder-style="color:#ADB0AE" auto-height />
				</view>
			</view>

			<view class="row" v-else @click="wechatNameToast">
				<view lines="1" class="left text" style="width: 130px;">用户昵称</view>
				<view class="left">
					<text lines="1" class="uni-text"
						style="text-align: right;color:#ADB0AE;max-width: 210px;">{{nickname}}</text>
				</view>
			</view>




			<view class="row" v-if="nameModifiable==true">
				<view class="left">
					<text lines="1" class="text">姓名</text>
				</view>
				<view class="left">
					<input class="uni-text" type="text" value='name' v-model='name' data-type='name'
						@input='inputValueChange' placeholder="请输入姓名" placeholder-style="color:#ADB0AE" />
				</view>
			</view>

			<view class="row" v-else @click="nameToast">
				<view class="left">
					<text lines="1" class="text">姓名</text>
				</view>
				<view class="left">
					<text lines="1" class="uni-text" style="color:#ADB0AE">{{name}}</text>
				</view>
			</view>




			<view class="row" @click="sexChoose">
				<view class="left">
					<text lines="1" class="text">性别</text>
				</view>

				<view class="left">
					<text lines="1" class="text-1" style="margin-right: 8px;">{{sex}}</text>
					<image class="arrow" src="@appstatic/img/my/my_icon_right_arrow.png">
				</view>
			</view>

			<view class="row">
				<view class="left">
					<text lines="1" class="text">手机号</text>
				</view>
				<view class="left">
					<!-- <input class="uni-text" type="number" value='mobile' v-model='mobile' data-type='mobile'
						maxlength="11" @input='inputValueChange' placeholder="请输入手机号"
						placeholder-style="color:#ADB0AE" /> -->
					<text lines="1" class="text-1" style="margin-right: 8px;">{{mobile}}</text>
				</view>
			</view>

			<view class="row" @click="toArea">
				<view class="left">
					<!-- #ifdef APP-PLUS||H5 -->
					<text lines="1" class="text">用车城市</text>
					<!-- #endif -->


					<!-- #ifdef MP-WEIXIN -->
					<text lines="1" class="text">城市</text>
					<!-- #endif -->
				</view>
				<view class="left">
					<text lines="1" class="text-1" style="margin-right: 8px;">{{area}}</text>
					<image class="arrow" src="@appstatic/img/my/my_icon_right_arrow.png">
				</view>
			</view>


		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="saveBtn" @click="save">保存</view>
		<!-- #endif -->
		<u-action-sheet :show="showSex" :actions="actions" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
	</view>
</template>

<script>
	import moment from 'dayjs'
	const app = getApp();
	const network = require("../../../manager/network-manager.js");
	const dialog = require("../../../utils/dialog.js");
	const util = require("../../../utils/util.js");
	import wCache from '@utils/wCache.js'
	import titlebar from '@/components/titlebar/titlebar'
	export default {
		data() {
			return {
				text: ' 个人资料设置',
				nickname: "",
				name: "",
				sex: "",
				mobile: "",
				area: "",
				userInfo: {},
				screenWidth: 300,
				showSex: false,
				actions: [{
						name: '男',
					},
					{
						name: '女',
					}
				],
				realNameUpdatetime: '',
				wechatNameUpdatetime: '',
				nameModifiable: true,
				wechatNameModifiable: true,

				province: "",
				cityCode: '',
				provinceCode: '',
				fromFunction: ''
			}
		},
		components: {
			titlebar,
		},
		created() {

			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				this.avatar = path;
				// 可以在此上传到服务端
				// var fileUrl = response.tempFilePaths[0]
				// console.log(fileUrl)
				var uploadUrl = app.globalData.config.BASE_URL + app.globalData
					.config.interfaces.URL_ALIYUN_OSS_UPLOAD
				var token = wCache.get('token')
				uni.uploadFile({
					url: uploadUrl, //仅为示例，非真实的接口地址
					filePath: path,
					name: 'file',
					header: {
						"token": "Bearer " + token,
						"Authorization": "Bearer " + token
					},
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						var uploadFileData = JSON.parse(uploadFileRes.data);
						var datapath = uploadFileData.data
						var save_uri = app.globalData.config.interfaces
							.URL_ADMIN_UPDATEUSERINFO;
						var save_params = {
							"id": app.globalData.userInfo.id,
							"userimages": datapath
						};

						network.put(save_uri, save_params, 'json')
							.then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: res.message,
										duration: 3000,
										icon: 'none'
									})
									app.globalData.userInfo
										.userimages = datapath
									app.saveUser(app.globalData.userInfo)
								} else {
									uni.showToast({
										title: res.message,
										duration: 3000,
										icon: 'none'
									})
								}
							}).catch(res => {
								uni.showToast({
									title: res.errMsg,
									duration: 3000,
									icon: 'none'
								})
								console.error(res);
							});

					}
				});
			})
		},
		onLoad: function() {


		},
		onShow() {
			var that = this
			that.userInfo = app.globalData.userInfo
			that.nickname = that.userInfo.wechatName
			that.name = that.userInfo.userName
			that.mobile = that.userInfo.phone
			if (that.userInfo.sex == "1") {
				that.sex = '男'
			} else if (that.userInfo.sex == "2") {
				that.sex = '女'
			} else {
				that.sex = that.userInfo.sex
			}
			if (that.fromFunction != "更改地址") {
				that.area = that.userInfo.city
				that.province = that.userInfo.province
				that.cityCode = that.userInfo.cityCode
				that.provinceCode = that.userInfo.provinceCode
			}


			that.realNameUpdatetime = that.userInfo.realNameUpdatetime
			that.wechatNameUpdatetime = that.userInfo.wechatNameUpdatetime


			if (that.realNameUpdatetime != null && that.realNameUpdatetime != '' && that.realNameUpdatetime !=
				undefined) {
				that.timeJudge(that.realNameUpdatetime, "realName")
			} else {
				that.nameModifiable = true
			}

			if (that.wechatNameUpdatetime != null && that.wechatNameUpdatetime != '' && that.wechatNameUpdatetime !=
				undefined) {
				that.timeJudge(that.wechatNameUpdatetime, "wechatName")
			} else {
				that.wechatNameModifiable = true
			}
			if (that.userInfo != null && that.userInfo != "" && that.userInfo.phone) {
				that.getUserWithMobile()
			}
		},
		methods: {
			//昵称提示
			wechatNameToast() {
				uni.showToast({
					title: '用户昵称30天修改一次',
					duration: 3000,
					icon: 'none'
				})
			},
			//姓名提示
			nameToast() {
				uni.showToast({
					title: '用户姓名30天修改一次',
					duration: 3000,
					icon: 'none'
				})
			},
			//时间判断
			timeJudge(data, type) {
				console.log("判断日期方法")
				var diffMonth = moment().diff(moment(data), 'days')

				if (diffMonth > 30) {
					if (type == "realName") {
						this.nameModifiable = true
					} else if (type == "wechatName") {
						this.wechatNameModifiable = true
					}
				} else {
					if (type == "realName") {
						this.nameModifiable = false
					} else if (type == "wechatName") {
						this.wechatNameModifiable = false
					}

				}



			},
			//输入监听
			inputValueChange(e) {
				let type = e.currentTarget.dataset.type
				let value = e.detail.value

				if (type == 'mobile') {
					value = Number(value.toString().match(/^\d+(?:\.\d{0,2})?/)[0])
					this.$nextTick(() => {
						this.formData[type] = value
					})
				}
			},
			// 获取屏幕宽度
			getWidth: function() {

				uni.getSystemInfo({
					success: res => {
						this.screenWidth = res.screenWidth - 30
						//#ifdef APP-PLUS||H5
						this.changeAvatar()
						//#endif
						//#ifdef MP-WEIXIN
						var src
						if (app.globalData.userInfo.userimages != '') {
							src = app.globalData.userInfo.userimages
						} else {
							src =
								'@appstatic/my/my_icon_avatar_unlogin.png'
						}
						uni.navigateTo({
							url: '/module_my/pages/setHeaderImage/setHeaderImage?destWidth=' + (res
									.screenWidth -
									30) +
								'&rectWidth=' + (res.screenWidth - 30) + '&fileType=jpg&src=' + src
						})
						//#endif

					}
				})

			},

			//更换头像
			changeAvatar: function(e) {
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: '/module_my/pages/setHeaderImage/setHeaderImage',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {

						// 输出图片宽度，高等于宽，单位px
						destWidth: this.screenWidth,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: this.screenWidth,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
						src: app.globalData.userInfo.userimages ? app.globalData.userInfo.userimages :
							'@appstatic/my/my_icon_avatar_unlogin.png'
					}
				})
			},
			//性别选择
			sexChoose: function() {


				this.showSex = true
			},
			sexSelect(e) {
				this.sex = e.name
			},
			//跳转所在区域
			toArea: function() {
				uni.navigateTo({
					url: "../myArea/myArea",
				});
			},
			//保存
			save: function() {
				if (this.nickname == '' || this.nickname == null) {
					uni.showToast({
						title: '请输入用户昵称',
						duration: 3000,
						icon: 'none'
					})
				} else if (this.nickname.length > 30) {
					uni.showToast({
						title: '用户昵称超过30个字',
						duration: 3000,
						icon: 'none'
					})
				} else if (this.name == '' || this.name == null) {
					uni.showToast({
						title: '请输入姓名',
						duration: 3000,
						icon: 'none'
					})
				} else if (this.name.length > 30) {
					uni.showToast({
						title: '姓名超过30个字',
						duration: 3000,
						icon: 'none'
					})
				} else if (this.area == "" || this.area == null) {
					uni.showToast({
						title: '请选择用车城市',
						duration: 3000,
						icon: 'none'
					})
				} else {
					this.updateInfo()
				}
			},
			updateInfo: function() {
				var sexCode = ""
				if (this.sex == "男") {
					sexCode = 1
				} else if (this.sex == "女") {
					sexCode = 2
				}
				var save_uri = app.globalData.config.interfaces
					.URL_ADMIN_UPDATEUSERINFO;
				var save_params = {
					"id": app.globalData.userInfo.id,
					"userName": this.name,
					"wechatName": this.nickname,
					// "sex": sexCode,
					"sex": this.sex,
					"city": this.area,
					"province": this.province,
					"cityCode": this.cityCode,
					"provinceCode": this.provinceCode,

				};

				network.put(save_uri, save_params, 'json', null, true)
					.then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: res.message,
								duration: 3000,
								icon: 'none'
							})
							this.getUserWithMobile()
							app.saveUser(app.globalData.userInfo)
						} else {
							uni.showToast({
								title: res.message,
								duration: 3000,
								icon: 'none'
							})
						}
					}).catch(res => {
						uni.showToast({
							title: res.errMsg,
							duration: 3000,
							icon: 'none'
						})
						console.error(res);
					});
			},
			//获取用户信息
			getUserWithMobile: function() {
				var params = {
					"phone": this.userInfo.phone
				};
				const header = {};
				var that = this;
				network.get(app.globalData.config.interfaces.URL_SYS_LOAD_USERINFO, params, "form", header).then(
					res => {
						if (res.code == 200) {
							app.saveUser(res.data);
							this.userInfo = app.globalData.userInfo
							this.nickname = this.userInfo.wechatName
							this.name = this.userInfo.userName
							this.mobile = this.userInfo.phone
							if (this.userInfo.sex == "1") {
								this.sex = '男'
							} else if (this.userInfo.sex == "2") {
								this.sex = '女'
							} else {
								this.sex = this.userInfo.sex
							}

							// this.area = this.userInfo.city

							if (that.fromFunction != "更改地址") {
								this.area = this.userInfo.city
							}


							this.realNameUpdatetime = this.userInfo.realNameUpdatetime
							this.wechatNameUpdatetime = this.userInfo.wechatNameUpdatetime




						} else {
							uni.showToast({
								title: res.message,
								duration: 3000,
								icon: 'none'
							})
						}
					}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
		}
	}
</script>

<style>
	@import "./myEdit.css";
</style>
